<template>
	<view class="yang_zhi_dang_an_box" :style="{height: windowHeight + 'px'}">
		<!-- 标题 -->
		<view class="title_box pv_20 text_center">
			<text class="title vertical_text mn fs_36_i mainColor fw_bold">ᠲᠡᠵᠢᠭᠡᠨ ᠦᠷᠡᠵᠢᠭᠦᠯᠬᠦ ᠳᠠᠩᠰᠠ ᠡᠪᠬᠡᠮᠡᠯ ᠨᠡᠮᠡᠬᠦ</text>
			
			<view class="add_btn">
				<i class="iconfont icon-a-ziyuan619 fs_40_i mainColor" @click="submitYangZhi()"></i>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="content_box">
			<view class="popup-content">	
			
				<!-- 分类 -->
				<view class="line h_70 lh_70">
					<view class="label">
						<text class="vertical_text mn pt_10">ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ</text>
					</view>
					<view class="input select">
						<uni-data-select v-model="addData.animalId" :localdata="classifySelect" placeholder=" " />
					</view>
				</view>
				
				<!-- 编号 -->
				<view class="line h_70 lh_70">
					<view class="label">
						<text class="vertical_text mn pt_12">ᠳ᠋ᠤᠭᠠᠷ</text>
					</view>
					<view class="input">
						<input class="h_full" type="number" v-model="addData.num" placeholder=" " />
					</view>
					<view class="sao_ma" @click="saoMiaoTiaoMa()">
						<uni-icons type="scan" color="#1c9aa0" size="24"></uni-icons>
					</view>
				</view>
				
				<!-- 年龄 -->
				<view class="line h_70 lh_70">
					<view class="label">
						<text class="vertical_text mn pt_12">ᠨᠠᠰᠥ</text>
					</view>
					<view class="input">
						<input class="h_full" type="number" v-model="addData.age" placeholder=" " />
					</view>
				</view>
				
				<!-- 重量 -->
				<view class="line h_90 lh_70">
					<view class="label">
						<text class="vertical_text mn pt_12">ᠪᠡᠶ᠎ᠡ᠎ᠶᠢᠨ ᠬᠦᠨᠳᠦ (kg)</text>
					</view>
					<view class="input zhong_liang">
						<input class="h_full" type="number" v-model="addData.weight" placeholder=" " />
					</view>
				</view>
				
				<!-- 性别 -->
				<view class="line h_70 lh_70">
					<view class="label">
						<text class="vertical_text mn pt_12">ᠬᠦᠢᠰᠦ</text>
					</view>
					<view class="input select">
						<uni-data-select v-model="addData.sex" :localdata="genderSelect" placeholder=" " />
					</view>
				</view>
					
				<!-- 上传图片 -->
				<view class="upload_img">
					<view class="example-body">
						<view class="img_list">
							<!-- 服务器中的图片 -->
							<view class="img_item" v-for="(item, index) in imgList" :key="index">
								<image :src="IMG_URL + item.path" mode=""></image>
								
								<!-- 删除 icon -->
								<view class="delete_icon">
									<uni-icons type="closeempty" size="18" @click="deleteImg(index)"></uni-icons>
								</view>
							</view>
							
							<!-- 添加图片按钮 -->
							<view class="add_img_item" v-show="isShow">
								<i class="iconfont icon-tianjiatupianlimianjiahao mainColor fs_80_i" @click="chooseImg"></i>
							</view>
						</view>
					</view>
				</view>
					
				<!-- 出生日期 -->
				<view class="line h_120">
					<view class="label lh_70">
						<text class="vertical_text mn pt_22">ᠲᠥᠷᠦᠭᠰᠡᠨ ᠡᠳᠦᠷ</text>
					</view>
					<view class="input">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="addData.birthDay" placeholder=" " />
					</view>
				</view>
				
				<!-- 繁殖次数 -->
				<view class="line h_100_i">
					<view class="label lh_70">
						<text class="vertical_text mn pt_8">ᠦᠷᠡᠵᠢᠭᠰᠡᠨ ᠤᠳᠠᠭ᠎ᠠ</text>
					</view>
					<view class="input">
						<input class="h_full" v-model="addData.breedingCount" placeholder=" " />
					</view>
				</view>
					
				<!-- 备注 -->
				<view class="line h_100_i">
					<view class="label lh_70">
						<text class="vertical_text mn pt_16">ᠲᠠᠢᠯᠪᠤᠷᠢ</text>
					</view>
					<view class="input">
						<input class="h_full" v-model="addData.remarks" placeholder=" " />
					</view>
				</view>
				
				<!-- 购入日期 -->
				<view class="line h_120">
					<view class="label lh_70">
						<text class="vertical_text mn pt_8">ᠬᠤᠳᠠᠯᠳᠤᠨ ᠣᠷᠤᠭᠤᠯᠤᠭᠰᠠᠨ ᠡᠳᠦᠷ </text>
					</view>
					<view class="input">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="addData.fromDay" placeholder=" " />
					</view>
				</view>
				
				<!-- 出售人姓名 -->
				<view class="line h_120">
					<view class="label lh_70">
						<text class="vertical_text mn pt_16">{{ formatMon1('ᠬᠤᠳᠠᠯᠳᠤᠭᠴᠢ') }}</text>
					</view>
					<view class="input">
						<input class="h_full" v-model="addData.fromBy" placeholder=" " />
					</view>
				</view>
				
				<!-- 出售人电话 -->
				<view class="line h_120">
					<view class="label lh_70">
						<text class="vertical_text mn pt_16"> {{ formatMon1('ᠬᠤᠳᠠᠯᠳᠤᠭᠴᠢ᠎ ᠶᠢᠨ ᠤᠲᠠᠰᠤ') }}</text>
					</view>
					<view class="input">
						<input class="h_full" v-model="addData.fromByPhone" placeholder=" " />
					</view>
				</view>
				
				<!-- 出栏日期 -->
				<view class="line h_120">
					<view class="label lh_70">
						<text class="vertical_text mn pt_12">{{ formatMon1('ᠪᠣᠷᠤᠯᠠᠭᠤᠭᠰᠠᠨ ᠡᠳᠦᠷ') }} </text>
					</view>
					<view class="input">
						<uni-datetime-picker class="h_full" type="date" :clear-icon="false" v-model="addData.sellDay" placeholder=" " />
					</view>
				</view>
				
				<!-- 购买人姓名 -->
				<view class="line h_100">
					<view class="label lh_70">
						<text class="vertical_text mn pt_10">᠎{{ formatMon1('ᠬᠤᠳᠠᠯᠳᠤᠨ ᠠᠪᠤᠭᠴᠢ') }} </text>
					</view>
					<view class="input">
						<input class="h_full" v-model="addData.sellBy" placeholder=" " />
					</view>
				</view>
				
				<!-- 购买人电话 -->
				<view class="line h_110">
					<view class="label lh_70">
						<text class="vertical_text mn pt_10">ᠬᠤᠳᠠᠯᠳᠤᠨ ᠠᠪᠤᠭᠴᠢ ᠶᠢᠨ ᠤᠲᠠᠰᠤ</text>
					</view>
					<view class="input">
						<input class="h_full" v-model="addData.sellByPhone" placeholder=" " />
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import getSystemInfo from '../../mixins/basic.js'
	import NET from '@/utils/request.js'
	import API from '@/config/api.js'
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				classify: '',
				qrCode: '',
				addData: {
					userId: "",
					age: null,
					animalId: '',
					animalTypeId: '',
					birthDay: "",
					breedingCount: "",
					delFlag: null,
					fileIds: "",
					files: [],
					fromBy: "",
					fromByPhone: "",
					fromDay: "",
					id: null,
					inspection: null,
					morbidity: null,
					num: "",
					remarks: null,
					sellBy: "",
					sellByPhone: "",
					sellDay: "",
					sex: "",
					user: null,
					weight: ''
				},
				
				imgList: [],

				isShow: true,
				classifySelect: [],		
				genderSelect: [
					{ value: "0", text: 'ᠡᠷ᠎ᠡ' },
					{ value: "1", text: 'ᠡᠮ᠎ᠡ' },
				]
				
			}
		},
		onLoad() {
			// 获取设备高度
			this.getSystemHeight()
			
			// 获取分类
			this.getClassifyList()
		},
		methods: {
			// 获取牲畜分类
			getClassifyList() {
				this.classifySelect = []
				NET.request(API.getAnimalCategory, 'GET')
				.then(res => {
					if (res.code == 200) {			
						
						for (let i in res.data) {
							this.classifySelect.push({ text: res.data[i].animalNameMn, value:  res.data[i].animalId })
						}
					}
				})
				.catch(err => {
					console.error('获取牲畜分类失败！', err)
				})
			},
			
			// 提交养殖档案
			submitYangZhi() {
				let params = {
					age: this.addData.age,
					animalId: '',
					animalName: "",
					animalTypeCount: '',
					animalTypeId: '',
					animalTypeName: "",
					birthDay: this.addData.birthDay,
					breedingCount: this.addData.breedingCount,
					createBy: '',
					createTime: this.getCurrentTime(),
					fileIds: "",
					files: this.imgList,
					fromBy: this.addData.fromBy,
					fromByPhone: this.addData.fromByPhone,
					fromDay: this.addData.fromDay,
					id: '',
					inspection: this.addData.inspection,
					morbidity: this.addData.morbidity,
					num: this.addData.num,
					remarks: this.addData.remarks,
					sellBy: this.addData.sellBy,
					sellByPhone: this.addData.sellByPhone,
					sellDay: this.addData.sellDay,
					sex: this.addData.sex,
					updateBy: "",
					updateTime: "",
					user: uni.getStorageSync('user'),
					userId: '',
					weight: this.addData.weight,
					weightMeasuredDate: ""
				}
				
				NET.request2(API.saveYangZhiDangAn, params, 'POST')
				.then(res => {
					if (res.code == 200 && res.msg == '养殖档案保存成功') {	
						uni.showToast({
							title: '添加成功！', icon: 'success'
						})
						
						setTimeout(() => {
							uni.navigateTo({
								url: '/subcontract/yang-zhi-dang-an/index',
							})
						}, 500)
					}
				})
				.catch(err => {
					console.error('添加养殖档案失败！', err)
				})
			},
			
			// 选择图片
			chooseImg() {
				let that = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],  
					sourceType: ['album', 'camera'], 
					success: function (res) {
						console.log(res)
						
						for (let i in res.tempFilePaths) {
							let params = {
								file: res.tempFilePaths[i],
								type: 'image'
							}
							
							NET.upload(API.uploadFile, params, res.tempFiles[i].path)
							.then(res => {
								let respon = JSON.parse(res)
								if (respon.code == 200) {						
									that.imgList.push(respon.data)
								}
							})
							.catch(err => {
								uni.showToast({
									title: '图片上传失败！',
									icon: 'none'
								})
								console.error('图片上传失败！', err)
							})
						}
					}
				})
			},
			
			// 删除图片
			deleteImg(index) {
				this.imgList.splice(index, 1)
			},
		
			// 扫描条码
			saoMiaoTiaoMa() {
				let that = this
				// 调起条码扫描
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {						
						that.qrCode = res.result
					},
					fail: () => {
						uni.showToast({
							title: '扫码失败！',
							icon: 'error'
						})
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.active_tab { border-bottom: 8rpx solid #ffa500; }
	
	.yang_zhi_dang_an_box {
		width: 100%;
		// border: 1px solid #f00;
		box-sizing: border-box;
		position: relative;
		
		// 标题
		.title_box {
			width: 80rpx;
			height: 100%;
			// background-color: #1c9aa0;
			border-right: 1px solid #1c9aa0;
			box-sizing: border-box;
			position: relative;
			float: left;
			
			.title { font-weight: 500 !important; }
			.add_btn {
				width: 100%;
				height: 50rpx;
				position: absolute;
				bottom: 30rpx;
			}
		}
	
		// 内容
		.content_box {
			width: calc(100% - 80rpx);
			height: 100%;
			overflow-y: auto;
			float: left;
			// padding: 10rpx 0;
			box-sizing: border-box;
			// border: 1px solid #090;
			
			.popup-content {
				width: 100%;
				overflow: auto;
				background-color: #fff;
				
				.title {
					width: 100%;
					padding-left: 10px;
					border-bottom: 1px solid #ccc;
					text {
						color: #1c9aa0;
						font-size: 16px;
					}
				}
				
				.line {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					border-bottom: 1px solid #ccc;
					position: relative;
					
					.label {
						width: 30%;
						padding-left: 10px;
						text {
							width: 100%;
						}
					}
					.input {
						width: 60%;
						height: 100%;

						input {
							width: 100%;
							display: inline-block;
							vertical-align: middle;
						} 
					}
				
					.sao_ma {
						width: 10%;
					}
				}
			}
		}
	}
</style>

<style lang="less">
	@import url('~@/static/css/plugin.css');
	
	.uni-select__input-placeholder, .uni-select__input-text {
		font-size: 16px !important;
	}
	
	.uni-select__selector-scroll {
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		
		.uni-select__selector-item {
			float: left;
			display: inline-block;
			
			text {
				writing-mode: vertical-lr;
				font-family: 'mn';
			}
		}
	}
	
	.uni-select__input-box {
		// height: 60rpx !important; 
	}
	
	.uni-select__input-text {
		writing-mode: vertical-lr;
		font-family: 'mn';
	}
	
</style>